Para crearlo añadiremos unas líneas a nuestra plantilla.
Nos situamos antes de ]]></b:skin> y añadimos lo siguiente:
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
Guardamos los cambios y en donde deseamos crear el efecto añadimos:
<a class="linkopacity" href="url-de-la-pagina" title="texto a mostrar" ><img src="url-de-la-imagen" border="0" style="border:1px solid black;" width="32" height="32" alt="Our friend Stu"></a>
Donde width="32"y height="32" lo podemos modificar para adecuar la imagen de tamaño. Si deseamos utilizar el efecto para crear un blogroll lo podemos hacer añadiendo el código tantas veces como imágenes deseamos añadir.En border: 1px escogemos grosor del borde.En lugar de color negro para el borde (black) podemos escoger otro cualquiera, así como el tipo de borde en (solid)Ejemplo:
Se ve Muy Bien
Hola, me gustaria saber como hacer para poner en el blog, como entrda el cmap tools, este es un programa en el cuao se pueden hacer mapas conceptuales. Por la web vi varios blogs que los tenian colgados ahi, pero no se como hacer para ponerlo, ya que si lo pongo como una imagen, no servirian los links
helllp!
Mi estimada cómplice:
Te recuerdo que te he obsequiado con un premio.
Por favor, pásate por mi blog para recogerlo.
Un besito,
Vesta, desde el corazón
Hola, soy Emmanuel, el creador de Unyversal Time y te invito a ti Gema a que escribas y/o modifiques HTML/Javaescript en
Bloggers Prodigiosos, de mmomento esc un blog sin nada, espero tu respuesta, porfavor contacta en mi blog ok?
tu dimelo y yo hago el resto.
Buff me ha costado horrores implantarlo, he tenido que leerme su plantilla de arriba abajo varias veces, e incluso probar con plantillas "simples". Pero al final he conseguido que funcione con la cuenta de la vieja; probar en todos los lugares posibles, sé que no es muy técnico, pero oye, si funciona.
Gracias por hacer cada día mi blog más mono
muchas gracias por el tutorial.
resultó excelente, y tiene buena apariencia.
Tinta&Letras
Lamento ver estos comentarios con tanto retraso :(
Gracias por comentar N3x A7X
Cecilia si n conseguiste añadirlo déjame la url de la página que vea el tipo de código que genera, pero normalmente es html y se añade como un elemento de página.
Vesta te pido mil disculpas por no ver este comentario antes. Mil gracias amiga :)
Emmanuel creo que ya hablamos sobre Unyversal Time aún sin ver este comentario ;)
Pamoba me alegra que lo solucionaras.
Gracias [●][Fake!][●] :)
Gracias Gem@!!! :) :) ;)
De nada Emilio :)
Hola Gema, veras una consulta, el efcto del rollover este, se puede hacer a la inversa, es decir que la imagen aparzca como es, y al pasar el raton se quede en gris
Gracias
Un saludo, tu blog me es muy util
yz Hola Maristas 7, puede hacerse invirtiendo los estilos:
a.linkopacity:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
Y la imagen la añadimos de la misma forma ;)
Muchas gracias Gema, ya me funciona como keria
Buenas noches Gema, no se si visitarás este comentario ya que lleva mucho tiempo sin aparición de comentarios pero tengo una duda al respecto. Mira te comento, estoy creándole una página web a mi cuñada que es modelo y tengo un pequeño problema con el rollover este. A mi se me ve perfectamente, lo tengo colocado en las imágenes y las tengo con opacidad 0.4em, el caso es que en mi ordenador funciona pero entro en la página desde otro ordenador y el efecto rollover no aparece. Me gustaria saber si tiene solución, gracias.
:: Jonatan no sabría decirte donde está el problema sin verlo, puede que se trate del navegador ya que dices que surge al cambiar de ordenador :S
:: Veo tu comentario tarde Maristas lo siento :S
Mira creo que el problema es que en la imagen no pongo ningún código. He intentado ponerlo pero el caso es que no se poner dos códigos. Porque también tengo puesto el lytebox. Si me dices una forma de poner el rollover y el lytebox de forma que pueda utilizar los dos códigos en una imagen seria de mucha ayuda. Muchas gracias, un saludo.
:: Para mostrar la imagen en una ventana modal con Lytebox prueba de este modo añadiendo la clase linkopacity directamente al enlace.
<a class="linkopacity" href="url-imagen-grande" rel="lytebox" title="Título"><img src="url-imagen-pequeña" style="height: 150px; width: 150px;" /></a>
He puesto un ejemplo en este blog de pruebas:
http://forevergema.blogspot.com/
Vale muchas gracias. He visto que el problema viene como bien dijiste del explorador. Utilizo Chrome y en Internet explorer no se me ve bien a mi tampoco. Si sabes una solución para eso dimelo, sino pues miraré haber por mis propios medios de encontrar una solución. Muchas gracias!
:: La solución ideal es actualizar el navegador a la última versión, de todas formas las propiedades varían según navegador por eso lo ideal es añadirlas todas, por ejemplo para Firefox usamos opacity... valor y para Explorer filter:alpha(opacity...
Para las últimas versiones de Explorer:
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=65)'; /* IE8 */
:: El emoticon sería lo mismo que añadimos para el emoticon sonriente, esto : y esto D
HOLA BUENÍSIMO EL BLOG, QUISERA SABER SI ALGUIEN PUEDE AYUDARME, LES CUENTO, NECESITO UN SCOLL PARA UNA GALERÍA DE IMÁGENES EL QUE TENGA A LOS NOMBRES CON EFECTO ROLLOVER Y ADEMÁS QUE QUEDE MARCADO EL NOMBRE EN EL QUE NOS ENCONTRAMOS. PORFIS ALGUIEN ME AYUDE. GRACIAS BAI.
:: Lo siento iris no sé de ninguno que haga todo eso.
Nota: solo los miembros de este blog pueden publicar comentarios.